<template>
  <div
    class="icon-menu__container absolute border-color-white border-opacity-40 py-[8px] px-[6px] rounded-[12px] bg-white/80 backdrop-blur-[40px]"
  >
    <div class="name mb-[10px] h-[32px] px-[1px]">
      <input
        class="h-full w-full rounded-[6px] bg-black/10 bg-opacity-[0.08] text-center text-[13px] text-[#1c1c1e99] focus:outline-none focus:shadow-none"
        type="text"
        v-model="icon.name"
      />
    </div>
    <div class="grid grid-cols-6 gap-[8px]">
      <div
        class="cursor-pointer rounded-[8px] p-[2px] transition-colors text-opacity-60"
        :class="
          icon.iconClass === item.iconClass
            ? 'bg-white active text-[#4a7aff]'
            : 'text-[#3a3a3c99] hover:bg-black/5 hover:bg-opacity-[0.06]'
        "
        v-for="item in icons"
        :key="item.iconClass"
        @click="changeMenu(item)"
      >
        <span
          class="icon-menu__font iconfont text-[28px] flex justify-center items-center leading-none"
          :class="`icon-${item.iconClass}`"
          v-if="item.iconClass.indexOf('/') === -1"
        ></span>
        <img
          v-else
          :src="item.iconClass"
          alt=""
          class="icongroup-img w-[28px] h-[28px]"
        />
      </div>
    </div>
    <div class="btn mt-[10px] flex justify-center px-[1px]">
      <button
        type="button"
        class="duration-150 h-[32px] !w-full rounded-[6px] bg-color-white text-[13px] text-[#4a7aff] px-[20px] bg-white"
        @click="save"
      >
        <span class="flex items-center justify-center truncate">{{
          saveType === "add" ? $t("message.addCategory") : $t("message.save")
        }}</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from "vue";
import type { PropType } from "vue";
import type { Cate, ResData } from "../api/category";
import resourceApi from "../api/resource";
const icons = ref([]);

function getResourceByTab(type) {
  return new Promise((resolve) => {
    resourceApi.getPage({ type }).then((res) => {
      resolve(res);
    });
  });
}
getResourceByTab("icon_group").then((res: any) => {
  icons.value = res.records.map((item) => ({
    name: item.name,
    icon: item.id,
    iconClass: item.resourceMultimediaUrl,
  }));
});

const icon = reactive({ ...icons.value[0] });

const changeMenu = (item) => {
  icon.iconClass = item.iconClass;
  icon.icon =  item.icon;
  icon.name = item.name;
};

const props = defineProps({
  cate: {
    type: Object as PropType<Cate>,
    default: () => ({ name: "", iconClass: "" }),
  },
  saveType: {
    type: String,
    default: "add",
  },
});

function resetDefaultIcon() {
  if (icons.value.length === 0) return;
  icon.name = icons.value[0].name;
  icon.iconClass = icons.value[0].iconClass;
  icon.icon = icons.value[0].icon;
}

watchEffect(() => {
  if (props.saveType === "add") {
    resetDefaultIcon();
  } else {
    Object.assign(icon, props.cate);
  }
});
const emit = defineEmits(["addOrEditCategory"]);
// 使用
const save = () => {
  emit("addOrEditCategory", icon);
  resetDefaultIcon();
};
</script>

<style scoped lang="scss">
.icon-menu__container {
  box-shadow: 0 2px 12px 0 #00000026;
}

.icongroup-img {
  position: relative;
  left: -300px;
  filter: drop-shadow(300px 0 var(--btn-color-active, #3a3a3c99));
}
.active {
  .icongroup-img {
    filter: drop-shadow(300px 0 var(--btn-color-active, #4a7aff));
  }
}
</style>
